<template>
  <div class="search">
    <add v-if="currView == 'add'" @close="currView = 'index'" @submited="submited" />
    <edit v-if="currView == 'edit'" @close="currView = 'index'" @submited="submited" :data="formData" />
    <Card v-show="currView == 'index'">
      <Row v-show="openSearch" @keydown.enter.native="handleSearch">
        <Form ref="searchForm" :model="searchForm" inline :label-width="0">
          <Form-item ref="searchForm" :model="searchForm" inline :label-width="0" style="display:flex;">
            <Form-item label="" prop="name">
              <Input type="text" v-model="searchForm.orderid" placeholder="订单编号" clearable style="width: 210px" />
            </Form-item>
            <Form-item style="margin-left:10px;" class="br">
              <Button @click="handleSearch" type="primary" icon="ios-search" size="small" ghost>搜索</Button>
              <Button @click="handleReset" type="warning" size="small" icon="md-refresh" ghost>重置</Button>
              <!-- <Button @click="add" type="info" size="small" icon="md-add" ghost>添加</Button>
                            <Button @click="delAll" type="error" icon="md-trash" size="small" ghost>删除</Button> -->
              <Button @click="excelData" type="success" icon="md-paper-plane" size="small" ghost>导出</Button>
            </Form-item>

          </Form-item>
        </Form>
      </Row>
      <Row class="operation" style="position:relative;">
        <transition>
          <div v-show="showFilterPanelFlag" class="filter-panel">
            <CheckboxGroup v-model="selected">
              <div v-for="item in mycolumns" :key="item.key">
                <Checkbox :label="item.title" style="margin: 2px 5px"></Checkbox>
              </div>
            </CheckboxGroup>
          </div>
        </transition>
      </Row>
      <Row v-show="openTip"> </Row>
      <Row>
        <Table :loading="loading" :height="tableHeight" border stripe size="small" :columns="columns" :data="datas"
          ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect"
          @on-row-click="rowClick" :row-class-name="rowClassNmae"></Table>
      </Row>
      <Row type="flex" justify="end" class="page">
        <Page :current="searchForm.page" :total="total" :page-size="searchForm.limit" @on-change="changePage"
          @on-page-size-change="changelimit" :page-size-opts="[20, 50, 100]" size="small" show-total show-elevator
          show-sizer></Page>
      </Row>
    </Card>
  </div>
</template>

<script>
import { getOrderYZFList, editOneOrder, deleteOneOrder, queryCount } from "../demo/demo1/api";
// import add from "./add.vue";
// import edit from "./edit.vue";
import dict from "@/views/template/dict";
export default {
  name: "single-window",
  components: {
    // add,
    // edit,
    dict
  },
  data () {
    return {
      tableHeight: 0,
      selected: [
        "选择",
        "序号",
        "订单编号",
        "商品名称",
        "商品图片",
        "购买数量",
        "价格",
        "总价",
        "支付类型",
        "状态",
        "地址",
        "操作",
      ],
      modal1: false,
      openSearch: true, // 显示搜索
      openTip: true, // 显示提示
      formData: {},
      currView: "index",
      loading: true, // 表单加载状态
      searchForm: { // 搜索框初始化对象
        page: 1, // 当前页数
        limit: 15, // 页面大小
        sort: "id", // 默认排序字段
        status: "已支付", // 默认排序方式
        orderid: "", // 订单编号
        goodname: "", // 商品名称
      },
      selectList: [], // 多选数据
      selectCount: 0, // 多选计数
      selectRow: 0,
      columns: [
        // 表头
        {
          type: "selection",
          width: 60,
          title: "选择",
          align: "center",
          fixed: "left",
        },
        {
          title: "序号",
          width: 80,
          align: "center",
          fixed: "left",
          sortType: true,
          render: (h, params) => {
            return h(
              "span",
              params.index +
              (this.searchForm.page - 1) * this.searchForm.limit +
              1
            );
          },
        },
        {
          title: "订单编号",
          key: "orderid",
          minWidth: 180,
          tooltip: true,
          sortable: false,
        },
        {
          title: "购买数量",
          key: "buynumber",
          minWidth: 90,
          tooltip: true,
          sortable: false,
          render: (h, params) => {
            return h("div", params.row.itemsJson.length + "件");
          }
        },
        {
          title: "总价",
          key: "discounttotal",
          sortable: true,
          sortType: "desc",
          minWidth: 100,
          align: "center",
          tooltip: true,
        },
        {
          title: "支付类型",
          key: "type",
          sortable: true,
          sortType: "desc",
          minWidth: 100,
          align: "center",
          tooltip: true,
          render: (h, params) => {
            return h("div", [
              h('span', params.row.type === 1 ? "微信" : "现金")
            ])
          }
        },
        {
          title: "状态",
          key: "status",
          minWidth: 100,
          align: "center",
          tooltip: true,
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          width: 250,
          fixed: "right",
          render: (h, params) => {
            return h("div", [
              h(
                "Button", {
                props: {
                  type: "primary",
                  size: "small",
                  icon: "ios-create-outline",
                  ghost: true
                },
                style: {
                  marginRight: "5px"
                },
                on: {
                  click: (e) => {
                    this.edit(params.row);
                  }
                }
              },
                "核销"
              ),
              h(
                "Button", {
                props: {
                  type: "primary",
                  size: "small",
                  icon: "ios-create-outline",
                  ghost: true
                },
                style: {
                  marginRight: "5px"
                },
                on: {
                  click: (e) => {
                    console.log(params.row);
                  }
                }
              },
                "退款"
              ),
              h(
                "Button", {
                props: {
                  type: "error",
                  size: "small",
                  icon: "md-trash",
                  ghost: true
                },
                on: {
                  click: () => {
                    this.remove(params.row);
                  }
                }
              },
                "删除"
              )
            ]);
          }
        }
      ],
      datas: [], // 表单数据
      page: 1, // 当前页数
      limit: 10, // 页面大小
      total: 0, // 表单数据总数
      showFilterPanelFlag: false,
    };
  },
  methods: {
    init () {
      this.getDataList();
    },
    submited () {
      this.currView = "index";
      this.getDataList();
    },
    changePage (v) {
      this.searchForm.page = v;
      this.getDataList();
      this.clearSelectAll();
    },
    changelimit (v) {
      this.searchForm.limit = v;
      this.getDataList();
    },
    rowClick (row, index) {
      this.selectRow = row;
    },
    rowClassNmae (row, index) {
      if (row.id == this.selectRow.id) {
        return "rowClassNmaeColor";
      }
      return "";
    },
    excelData () {
      this.$refs.table.exportCsv({
        filename: "导出结果",
      });
    },
    handleSearch () {
      this.searchForm.page = 1;
      this.searchForm.limit = 15;
      this.getDataList();
    },
    handleReset () {
      this.$refs.searchForm.resetFields();
      this.searchForm.page = 1;
      this.searchForm.limit = 15;
      this.searchForm.orderid = "";
      // 重新加载数据
      this.getDataList();
    },
    changeSort (e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order === "normal") {
        this.searchForm.order = "";
      }
      this.getDataList();
    },
    clearSelectAll () {
      this.$refs.table.selectAll(false);
    },
    changeSelect (e) {
      this.selectList = e;
      this.selectCount = e.length;
    },
    getDataList () {
      this.loading = true;
      const params = {
        status: '已支付',
      }
      queryCount(params).then(res => {
        if (res.success)
          this.total = res.result;
      })
      getOrderYZFList(this.searchForm).then(res => {


        this.loading = false;
        if (res.success) {
          const newResult = res.result.map((item) => {
            item.itemsJson = JSON.parse(item.itemsJson)
            return item;
          })
          this.$nextTick(() => {
            this.datas = newResult;
          })
        }

      });
    },
    add () {
      this.currView = "add";
    },
    edit (row) {
      console.log(row.status);
      this.$Modal.confirm({
        title: "确认核销",
        content: `您确认要核销${row.orderid}订单吗？`,
        loading: true,
        onOk: () => {
          row.status = '已完成';
          const params = {
            orderid: row.orderid,
          }
          editOneOrder(params).then(res => {
            this.$Modal.remove();
            if (res.success) {
              this.$Message.success("操作成功");
              this.getDataList();
            }
          })
        }


      })
    },
    remove (v) {
      console.log(v.id);
      this.$Modal.confirm({
        title: "确认删除",
        // 记得确认修改此处
        content: "确认进行删除 " + v.id + " ?",
        loading: true,
        onOk: () => {
          // 删除
          const params = {
            ids: v.id
          }
          deleteOneOrder(params).then(res => {
            console.log(res);

            this.$Modal.remove();
            if (res.success) {
              this.$Message.success("操作成功");
              this.getDataList();
            }
          });
        }
      });
    },
    delAll () {
      if (this.selectCount <= 0) {
        this.$Message.warning("您还未选择要删除的数据");
        return;
      }
      this.$Modal.confirm({
        title: "确认删除",
        content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
        loading: true,
        onOk: () => {
          let ids = "";
          this.selectList.forEach(function (e) {
            ids += e.id + ",";
          });
          ids = ids.substring(0, ids.length - 1);
          // 批量删除
          deleteOneOrder({
            ids: ids
          }).then(res => {
            this.$Modal.remove();
            if (res.success) {
              this.$Message.success("操作成功");
              this.clearSelectAll();
              this.getDataList();
            }
          });
        }
      });
    }
  },
  mounted () {
    this.init();
    this.tableHeight = Number(window.innerHeight - 273);
    this.mycolumns = this.columns;
    let showcolumns = [];
    for (var i = 0; i < this.selected.length; i++) {
      var item = this.selected[i];
      for (var j = 0; j < this.columns.length; j++) {
        if (this.columns[j].title == item) {
          showcolumns.push(this.columns[j]);
        }
      }
    }
    this.columns = showcolumns;
  },
  watch: {
    selected: function (newcolumns) {
      let showcolumns = [];
      for (var i = 0; i < this.mycolumns.length; i++) {
        var item = this.mycolumns[i];
        if (item.title == undefined) showcolumns.push(item);
        else if (newcolumns.contains(item.title)) showcolumns.push(item);
      }
      this.columns = showcolumns;
    },
  },
};
</script>

<style lang="less">
// @import "../../../styles/table-common.less";
.search {
  .operation {
    margin-bottom: 2vh;
  }

  .select-count {
    font-weight: 600;
    color: #40a9ff;
  }

  .select-clear {
    margin-left: 10px;
  }

  .page {
    margin-top: 2vh;
  }

  .drop-down {
    margin-left: 5px;
  }
}

.filter-panel {
  width: 166px;
  min-height: 120px;
  height: 200px;
  position: absolute;
  background-color: white;
  z-index: 9999;
  margin-left: 1px;
  overflow-y: scroll;
  border: 1px solid blue;
  top: 35px;
  right: 10px;
}

.openSearch {
  position: absolute;
  right: 240px;
}

.openTip {
  position: absolute;
  right: 130px;
}

.showFilterPanelFlag {
  position: static !important;
  right: 10px;
  margin-right: 10px;
}

.ivu-table td {
  height: 38px !important;
}

.ivu-table-cell-with-expand {
  height: 38px !important;
  line-height: 38px !important;
}

.ivu-table .rowClassNmaeColor td {
  background-color: #b0b3b6 !important;
  color: #ffffff !important;
  font-size: 12px;
}
</style>
